<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { propApi } from '@/api/controller';
  import { productTypeArr } from '@/pinia/getter';
  import { ToastSuccess, Toastloading } from '@/utils/public';
  import serachUserid from '@/components/serachUserid/index.vue';
  import nameplateList from '../list/index.vue';
  const formLabelWidth = '120px'
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    dialognamePlateVisible:false,
    disabled:false,
    nameplate_name:'',
    formType:'add'
  })
  interface formQuert {
    nameplate_id:number
    user_id:number
    time_st:string
    time_et:string
    sort:number | string
  }
  let form = reactive({} as formQuert)
  const formRules = {
    nameplate_id: [{ required: true, message: "请选择铭牌", trigger: "blur" }],
    user_id: [{ required: true, message: "请输入用户UUID", trigger: "blur" }],
    sort: [{ required: true, message: "请输入展示顺序", trigger: "blur" }],
    time_st: [{ required: true, message: "开始时间", trigger: "blur" }],
    time_et: [{ required: true, message: "选择结束时间", trigger: "blur" }],
  }
  const nameplateChange = (item:any)=>{
    const { id, nameplate_name } = item
    form.nameplate_id = id
    action.nameplate_name = nameplate_name
    action.dialognamePlateVisible = false
  }
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      let submitSet = false
      const { nameplate_id } = form
      const loading = Toastloading()
      if(action.formType == 'add') {
        await propApi.nameplateUserAdd(form).then(()=>{
          submitSet = true
          ToastSuccess('下发成功')
        }).catch(()=>{
          loading.close()
        })
      }
      if(action.formType == 'edit') {
        await propApi.nameplateUserEdit(form).then(()=>{
          submitSet = true
          ToastSuccess('编辑成功')
        }).catch(()=>{
          loading.close()
        })
      }
      if(submitSet) {
        loading.close()
        closeDialog()
        $emit('updateList')
      }
    })
  }
  const openDialog = async(query:any = {}, formType:string = 'add')=> {
    const { 
      nameplate_id='',user_id='',time_st='',time_et='',sort=''
    } = query
    action.formType = formType
    Object.assign(form,{
      nameplate_id,user_id,time_st,time_et,sort
    })
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    form = reactive({} as formQuert)
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="10vh"
      class="xm-dialog input-width"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :show-close="action.disabled"
      :close-on-press-escape="action.disabled"
      width="40%"
      :title="action.formType == 'add'?'下发铭牌':'编辑下发记录'">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item :label-width="formLabelWidth" label="铭牌" prop="nameplate_id">
          <el-button v-if="!form.nameplate_id" type="primary" @click="action.dialognamePlateVisible = true">选择铭牌</el-button>
          <el-tag v-if="form.nameplate_id" size="large">
            <span style="font-size: 14px;">铭牌ID：{{form.nameplate_id}} 铭牌名称：{{ action.nameplate_name }}</span>
            <span class="pointer xm-ml10" style="color:blue; font-size: 14px;" @click="action.dialognamePlateVisible = true">重新选择</span>
          </el-tag>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用户UUID" prop="user_id">
          <serachUserid v-model:user_id="form.user_id" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="展示顺序" prop="sort">
          <el-input
            v-model="form.sort"
            placeholder="请输入展示顺序"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="开始时间" prop="time_st">
          <el-date-picker
            v-model="form.time_st"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择开始时间" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="结束时间" prop="time_et">
          <el-date-picker
            v-model="form.time_et"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择结束时间" />
        </el-form-item>
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      top="10vh"
      class="xm-dialog nameplateList"
      v-model="action.dialognamePlateVisible"
      width="60%"
    >
      <nameplateList :serach-list="true" :nameplate_id="form.nameplate_id" @change="nameplateChange" />
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
  :deep(.nameplateList) {
    padding: 0;
    .xm-content {
      padding: 0;
    }
    .el-input__wrapper, .el-select__wrapper {
      --el-color-danger:var(--el-border-color);
    }
  }
</style>